<template>
  <div>
    <!-- 使用v-if判断了5次 -->
    <!-- <div v-for="u in users" :key="u.name" v-if="u.active">
      {{ u.name }}
    </div> -->

    <!-- <div v-for="u in activeUsers" :key="u.name">
      {{ u.name }}
    </div> -->

    <!-- <div v-for="u in getActiveUser(users)" :key="u.name">
      {{ u.name }}
    </div> -->

    {{ users | filterActive(true) }}
  </div>
</template>

<script>
export default {
  filters: {
    filterActive(users, args) {
      console.log(users, args);
      return users.filter((u) => u.active);
    },
  },
  // computed在监视的this.xxx数据相同时会缓存
  computed: {
    activeUsers() {
      return this.users.filter((u) => u.active);
    },
  },
  methods: {
    getActiveUser(users) {
      // js做5次判断
      return users.filter((u) => u.active);
    },
  },
  data() {
    return {
      users: [
        { active: true, name: "jack" },
        { active: false, name: "rose" },
        { active: true, name: "mick" },
        { active: false, name: "jason" },
        { active: true, name: "green" },
      ],
    };
  },
};
</script>

<style>
</style>